<template>
	<view >
		<navigation-top isBack="true" imgSrc="../../static/img/Logo-ERoad-文字版-1.png"></navigation-top>
		
		<view class="hint">
			<image src="../../static/img/icon-notice.png" mode="widthFix"></image>
			<text>请选择你的下车站点</text>
		</view>
		
		<view class="placeBox">
			<view class="timeBox">
				<text>{{fareList.departureDay}}</text>
				<text>{{fareList.departureTime}}</text>
			</view>
			<view class="place">
				<view class="depart"> 
					<view class="imgBox">
						<image src="../../static/img/icon-起点.png" mode="widthFix"></image>	
					</view>
					<text>{{fareList.startStop}}</text>
				</view>
				<view class="depart">
					<view class="imgBox">
						<image src="../../static/img/icon-终点.png" mode="widthFix"></image>
					</view>
					<text>{{fareList.lastStop}}</text>
				</view>
			</view>
		</view>
		
		<view class="siteBox">
			<view class="site" v-for="(item,index) in siteList" :key="item.stationId" @click="handleSite(item.stationId,index)" >
				<view class="circle" :class="siteActive===item.stationId?'active':''"></view>
				<text>{{item.stationName}}</text>
			</view>
		</view>
		
		<view class="submitOrder" :class="siteActive!= -1?'submitActive':''"
		@tap="confirmOrder()">提交订单</view>
		
		
		
		<view class="upload" v-show="isupload">
			<view class="mask" @click="hidePopup"></view>
			<image src="../../static/img/upload.png" mode="widthFix"></image>
			<text>正在为您锁座中...</text>
			
		</view>
	</view>
</template>

<script>
import navigationTop from "../../components/navigationTop/navigationTop.vue"
	export default {
		data() {
			return {
				fare:[
					{	
						id:0,
						date:"11月15日",
						time:"09:45",
						depart:"韩山师范学院(校本部)",
						destination:"东莞虎门火车站",
						price:"168.88"
					},
					],
				siteList:[],
				siteActive:-1,
				isupload:false,
				fareList:{},
				fareIndex:0,
			}
		},
		components: {
			navigationTop,
		},
		onLoad(options) {
			this.fareList = JSON.parse(decodeURIComponent(options.fareList))
			console.log(this.fareList)
		},
		onShow() {
			this.getSiteList()
		},
		methods: {
			// 选择站点
			handleSite(id,index){
				this.siteActive = id
				this.fareIndex = index
			},
			
			async getSiteList(){
				const res = await this.$myRequest({
					url:"/bus/listStation",
					data:{
						cityName:this.fareList.lastStop,
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded; charset=UTF-8',
					},
				})
				console.log(res)
				if(res.data.data){
					this.siteList = res.data.data
				}
			},
			// 跳转确认订单页
			confirmOrder(){
				this.isupload = !this.isupload
				// uni.navigateTo({
				// 	url:"pages/confirmOrder/confirmOrder?fareList="
				// 	// +encodeURIComponent(JSON.stringify(this.fareList))
				// })
				const stationName = this.siteList[this.fareIndex].stationName
				uni.navigateTo({
					url:"/pages/confirmOrder/confirmOrder?fareList="+encodeURIComponent(JSON.stringify(this.fareList))+"&stationName="+  encodeURIComponent(JSON.stringify(stationName))
				})
				console.log(11111111)
			},
			hidePopup() {
			      this.isupload = false;
			    }
			
		}
	}
</script>

<style lang="scss">
	.mask {
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	}
	.hint{
		width: 100%;
		height: 88rpx;
		background: #EB6A58;
		display: flex;
		align-items: center;
		font-size: 32rpx;
		font-family: Inter, Inter;
		font-weight: 500;
		color: #FAFAFA;
		image{
			width: 64rpx;
			margin-left: 36rpx;
			margin-right: 12rpx;
		}
	}
	
	.placeBox{
		display: flex;
		height: 180rpx;
		background: #FAFAFA;
		align-items: center;
		border-bottom:1rpx solid #EB6A58;
		margin-bottom: 36rpx;
		.timeBox{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 174rpx;
			height: 180rpx;
			font-size: 48rpx;
			font-family: Inter, Inter;
			font-weight: bold;
			color: #000000;
			border-right: 2rpx dashed #A8A8A8;
			text:nth-child(1){
				font-size: 32rpx;
				font-weight: 400;
				color: #333333;
			}
		}
		.place{
			display: flex;
			flex-direction: column;
			height: 180rpx;
			justify-content: center;
			.depart{
				display: flex;
				font-size: 36rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #333333;
				margin-bottom: 14rpx;
				align-items: center;
				.imgBox{
					image{
						width: 32rpx;
						height: 32rpx;
						margin: auto 8rpx auto 36rpx;
					}					
				}
				
			}
		}		
	}
	
	.siteBox{
		padding: 40rpx 64rpx;
		.site{
			height: 98rpx;
			border-bottom: 1rpx solid #D9D9D9;
			display: flex;
			align-items: center;
			color: #545454;			
			font-family: Inter, Inter;
			font-size: 32rpx;
			.circle{
				width: 48rpx;
				height: 48rpx;
				border-radius: 48rpx;
				background: #D9D9D9;
				margin-right: 36rpx;
			}
			.active{
				background: #EB6A58;
			}
			
		}
		
	}
	
	
	.submitOrder{
		width: 400rpx;
		height: 118rpx;
		background: #D9D9D9;
		border-radius: 24rpx;
		font-size: 40rpx;
		font-family: Inter, Inter;
		font-weight: 400;
		color: #545454;
		text-align: center;
		line-height: 118rpx;
		margin: 58rpx auto;
		
	}
	.submitActive{
		background: #F7C269;
		font-size: 40rpx;
		font-weight: bold;
		color: #333333;
	}
	
	.upload{
		position: absolute;
		left: 160rpx;
		top: 544rpx;
		width: 434rpx;
		height: 321rpx;
		background: #FAFAFA;
		border-radius: 12rpx;
		font-size: 32rpx;
		font-family: Inter, Inter;
		font-weight: 400;
		color: #EB6A58;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		image{
			width: 120rpx;
			margin-bottom: 28rpx;
			 animation: spin 1s infinite linear;
		}
	}
	
	@keyframes spin {
	  0% { transform: rotate(0deg); }
	  100% { transform: rotate(360deg); }
	}
	
</style>
